<template>
  <div class="container">
    <div class="user-header">
      <login />
    </div>
    <div class="main">
      <div class="actions">
        <n-space>
          <button class="btn" @click="changeMode(0)">查看留言</button>
          <button class="btn" @click="changeMode(1)">发布留言</button>
          <button class="btn" @click="changeMode(2)">修改留言</button>
        </n-space>
      </div>
      <n-card>
        <div class="panel">
          <message-list ref="messageList" class="list" :mode="mode" @selection="messageSelection" />
          <div class="right">
            <message-detail v-if="mode === 0" v-model:message="currentSelectionMessage" @messageChange="changeMessage" />
            <message-create v-else-if="mode === 1" @reloadList="reloadList" />
            <message-modify v-else-if="mode === 2"
                            v-model:message="currentSelectionMessage"
                            @messageChange="changeMessage" />
          </div>
        </div>
      </n-card>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue"
import MessageList from "@/components/MessageList.vue"
import MessageDetail from "@/components/MessageDetail.vue"
import MessageCreate from "@/components/MessageCreate.vue"
import MessageModify from "@/components/MessageModify.vue"
import Login from "@/components/Login.vue";
import {useMessage} from "naive-ui";

const message = useMessage()

const mode = ref(0)
const currentSelectionMessage = ref(null)
const changeMode = v => {
  currentSelectionMessage.value = null
  mode.value = v
}

const messageList = ref(null)
const messageSelection = data => {
  currentSelectionMessage.value = data
}

const changeMessage = data => {
  currentSelectionMessage.value = data
  messageList.value.updateMessageItem(data)
}

const reloadList = () => {
  messageList.value.reload()
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  max-width: 1024px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;

  .user-header {
    .login-btn {
      color: #ffec3d;
    }

    .register-btn {
      color: #fff;
    }
  }

  .main {
    margin-top: 22rem;

    .actions {
      .btn {
        cursor: pointer;
        border: unset;
        color: #d83b01;
        background-image: linear-gradient(135deg, #ffe259, #ffa751);
        padding: .5rem 1rem;
        border-radius: .375rem;
      }

      .btn:hover {
        border: unset;
      }
    }

    .n-card {
      margin-top: 1rem;

      .panel {
        display: flex;

        .list {
          flex: 2;
        }

        .right {
          flex: 1;
          margin-left: 1rem;
        }
      }
    }
  }
}
</style>
